<template>
  <div class="vip">
    <!-- <h2>会员管理</h2> -->
    <Row>
      <Form ref="form"
            :label-width="100"
            inline>
        <Input v-model="searchForm.filter.nickname"
               placeholder="请输入昵称"
               @keydown.enter.native="handleSearch"
               style="width:300px;margin-right:20px ;margin-bottom:20px" />
        <Button @click="handleSearch"
                type="primary"
                style="margin-bottom:20px">搜索</Button>
        <Button @click="handleReset"
                type="default"
                style="margin-bottom:20px;margin-left:10px">重置</Button>
      </Form>
    </Row>
    <Row>
      <Table border
             :columns="columns5"
             :data="data5"
             @on-sort-change="orderBy"></Table>
    </Row>
    <Row type="flex"
         justify="end"
         class="page">
      <Page :current="searchForm.page"
            :total="total"
            :page-size="searchForm.limit"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50]"
            size="small"
            show-total
            show-elevator
            show-sizer></Page>
    </Row>
  </div>
</template>

<script>
import { vipUserList } from '@/api/mc/vip.js'

export default {
  data () {
    return {
      searchForm: {
        filter: { nickname: null }, // 双向绑定搜索数据
        sort: { id: 'desc' }, // 自定义排序
        page: 1,
        limit: 10
      },
      data: [],
      columns5: [
        {
          title: '会员ID',
          key: 'id',
          align: 'center',
          width: '100'
        },
        {
          title: '昵称',
          key: 'nickname',
          align: 'center'
        },
        {
          title: '会员头像',
          key: 'headimgurl',
          align: 'center',
          render (h, params) {
            const { headimgurl } = params.row
            return h('img', {
              style: {
                weight: '50px',
                height: '50px'
              },
              attrs: {
                src: params.row.headimgurl
              }
            })
          }
        },
        {
          title: '微信',
          key: 'wx_no',
          align: 'center'
        },
        {
          title: '电话',
          key: 'mobile',
          align: 'center'
        },
        {
          title: 'TA上级',
          key: 'parent_id',
          align: 'center',
          render (h, params) {
            if (params.row.relevance_user) {
              return h('p', params.row.relevance_user.nickname)
            } else {
              return h('p', ' ')
            }
          }
        },
        {
          title: '下级数量',
          key: 'children_num',
          sortable: 'custom',
          align: 'center'
        },
        {
          title: 'TA的佣金',
          key: 'total_commission',
          sortable: 'custom',
          align: 'center',
          render (h, params) {
            return h('p', params.row.total_commission)
          }
        }
      ],
      data5: [],
      total: 0
    }
  },
  methods: {
    orderBy (column, key, order) {
      console.log(column)
      // eslint-disable-next-line camelcase
      let can_commission = column.key
      let nick = this.searchForm.filter.nickname
      let limit = this.searchForm.limit
      // 赋值
      if (column.order == 'normal') {
        this.searchForm = {
          filter: { nickname: nick }, // 双向绑定搜索数据
          sort: { id: 'desc' }, // 自定义排序
          page: 1,
          limit: limit
        }
      } else {
        if (column.key == 'total_commission') {
          this.searchForm = {
            filter: { nickname: nick }, // 双向绑定搜索数据
            sort: { total_commission: column.order }, // 自定义排序
            page: 1,
            limit: limit
          }
        } else {
          this.searchForm = {
            filter: { nickname: nick }, // 双向绑定搜索数据
            sort: { children_num: column.order }, // 自定义排序
            page: 1,
            limit: limit
          }
        }
      }
      console.log('this.searchForm', this.searchForm)
      // 调用list渲染
      this.data5 = []
      vipUserList(this.searchForm).then(res => {
        // console.log('res', res)
        res.data.map(v => {
          this.data5.push(v)
        })
        this.total = res.meta.pagination.total
      })
    },
    // 搜索
    handleSearch (e) {
      this.searchForm.page = 1
      this.getList()
    },
    // 重置
    handleReset () {
      this.searchForm.filter.nickname = ''
      this.searchForm.page = 1
      this.getList()
    },
    // 获取数据
    getList () {
      this.data5 = []

      vipUserList(this.searchForm).then(res => {
        this.data5 = []
        console.log('页面初始化res', res)
        res.data.map(v => {
          this.data5.push(v)
        })
        this.total = res.meta.pagination.total
      })
    },
    // 分页
    changePage (v) {
      this.searchForm.page = v
      this.getList()
    },
    changePageSize (v) {
      console.log('提交数据', this.searchForm)
      this.searchForm.limit = v
      this.getList()
    }
  },
  created () {
    this.getList()
  }
}
</script>
